/*!
 * @(#) total.scss
 * 版权声明 厦门畅享信息技术有限公司, 版权所有 违者必究
 *
 * <br> Copyright:  Copyright (c) 2019
 * <br> Company:厦门畅享信息技术有限公司
 * <br> @author lihui
 * <br> 2019-07-19 10:57:48
 */
@import "../../../../assets/sass/base";
:global{
    #root{
        width: 100%;
        height:100%;
        .bigBox{
            width: 100%;
            height:100%;
            background: #F5F5F5;
        }
        .to-title{
            width:100%;
            height:180px;
            background: url("../../../../assets/images/StatisticsTitle.jpg") no-repeat;
            background-size: 100% 140px;
            display: flex;
            justify-content: space-between;
            >div{
                >span{
                    color: #ffffff;
                    font-size: 12px;
                    display: inline-block;
                    width:15px;
                    height:15px;
                    background: #F78C18;
                    line-height: 17px;
                    text-align: center;
                    border-radius: 50%;
                    margin-right:10px;
                }
                background: #ffffff;
                width:100%;
                height:40px;
                margin-top:140px;
                color: #676767;
                line-height: 40px;
                display: inline-block;
                box-sizing: border-box;
                padding-left: 12px;
                border-bottom: 1px solid #D9D9D9;
            }
        }
        .ys-content{
            width:100%;
            border-bottom:1px solid #D9D9D9;
            .ys-title{
                width:100%;
                box-sizing: border-box;
                padding: 10px 0 10px 12px;
                color: #7A7A7A;
            }
            .ys-conten{
                width:100%;
                background: #ffffff;
            }
            .ys-cont{
                width:98%;
                margin: auto;
                background: #ffffff;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                div{
                    color: #ffffff;
                    display: inline-block;
                    width:47%;
                    height:50px;
                    text-align: center;
                    padding:10px 0px;
                    margin-top: 20px;
                    border-radius: 5px;
                    span{
                        display: block;
                    }
                    span:nth-child(1){
                        font-size: 25px;
                        padding: 0 0 12px 20px;
                        text-align: left;
                    }
                    span:nth-child(2){
                        text-align: left;
                        font-size: 14px;
                        padding-left: 15px;
                    }
                }
                div:nth-child(1){
                    background: url("../../../../assets/images/tingKeSum.jpg") no-repeat;
                    background-size: 100% 100%;
                }
                div:nth-child(2){
                    background: url("../../../../assets/images/tingKeCommited.jpg") no-repeat;
                    background-size: 100% 100%;
                }
                div:nth-child(3){
                    background: url("../../../../assets/images/jiangKeSum.jpg") no-repeat;
                    background-size: 100% 100%;
                    margin-bottom: 20px;
                }
                div:nth-child(4){
                    background: url("../../../../assets/images/tingKeUnCommited.jpg") no-repeat;
                    background-size: 100% 100%;
                    margin-bottom: 20px;
                }
            }
        }
        .recentrecord{
            width:100%;
            height:auto;
            background: url("../../../../assets/images/tingKeStat.jpg") no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            margin-top: 10px;
            .rr-title{
                width:100%;
                padding:15px 0 0 20px;
                box-sizing: border-box;
                text-align: left;
                font-weight: 600;
            }
            .rr-seven{
                box-sizing: border-box;
                width:100%;
                padding:15px 0 12px 20px;
                span:nth-child(1){
                    color: #0099dd;
                }
                span:nth-child(2){
                    color: #CF1322;
                }
            }
            .rr-fifteen{
                box-sizing: border-box;
                width:100%;
                padding:0px 0 12px 20px;
                span:nth-child(1){
                    color: #0099dd;
                }
                span:nth-child(2){
                    color: #CF1322;
                }
            }
            .rr-thirty{
                box-sizing: border-box;
                width:100%;
                padding:0px 0px 18px 20px;
                span:nth-child(1){
                    color: #0099dd;
                }
                span:nth-child(2){
                    color: #CF1322;
                }
            }
        }
        .listeningtask{
            width:100%;
            height: 200px;
            background: #FFFFFF;
            .lt-title{
                width:100%;
                box-sizing: border-box;
                padding: 10px 0 10px 12px;
                color: #6F6F6F;
                background: #F5F5F5;
            }
            .lt-percent{
                width:100%;
                height:40px;
                overflow: hidden;
                background: #ffffff;
                border-bottom: black;
            }
            .lt-time{
                width:45%;
                text-align: left;
                box-sizing: border-box;
                font-size: 14px;
                display: inline-block;
                line-height: 18px;
                float: left;
                color: #4D4D4D;
                padding:10px 0px 10px 12px;
            }
            .progress-container{
                margin-left: 48%;
                margin-top: 14px;
            }
            .mshare-whitespace{
                display: none !important;
            }
            .mshare-progress-text-wrap{
                height:8px !important;
                width:90%;
                .mshare-progress-progress{
                    width: 84%;
                }
                .mshare-progress-outer{
                    height:8px !important;
                    border-radius: 0;
                    .mshare-progress-bar{
                        border-width:10px !important;
                        margin-left: -20px;
                    }
                }
                .mshare-progress-size-lg{
                    overflow: hidden;

                }
                .mshare-progress-text{
                    width: 20%;
                    margin-left: 82%;
                    height:8px !important;
                    font-size:10px !important;
                    line-height: 10px !important;
                    color: #0099dd;
                }
            }
        }
    }
}

